/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="common-agg-form">
        <sf-form-item class="form-item--first agg-list-form">
            <sf-fieldlabel>
                <lang>分组字段</lang>
            </sf-fieldlabel>
            <div class="agg-list">
                <div
                    v-for="(item,index) in formData.groupByKeys"
                    :key="index"
                    class="groupby-item">
                    <sf-select
                        v-model="formData.groupByKeys[index]"
                        :default-width="fieldGroupWidth"
                        :allow-search="true"
                        :default-disabled="disabled"
                        :allow-blank="false"
                        :options="list" />
                    <span
                        v-if="!disabled"
                        class="icon iconfont iconqingkong remove"
                        @click="_removeGroupByItem(index)"></span>
                </div>
                <sf-button
                    v-if="!disabled"
                    icon-cls="icon-comp-add"
                    @click="_addGroupBy">
                    新增
                </sf-button>
            </div>
        </sf-form-item>
        <sf-form-item class="form-item--first agg-list-form">
            <sf-fieldlabel>
                <lang>聚合统计</lang>
            </sf-fieldlabel>
            <div class="agg-list">
                <div v-for="(item,index) in formData.aggregationColumns"
                     :key="index"
                     class="agg-analysis_item">
                    <sf-select v-model="formData.aggregationColumns[index]"
                               :default-width="140"
                               :allow-search="true"
                               :allow-blank="false"
                               class="m-r5"
                               :default-disabled="disabled"
                               :options="list" />
                    <sf-select v-model="formData.aggregationOps[index]"
                               :default-width="140"
                               :allow-search="true"
                               :allow-blank="false"
                               :default-disabled="disabled"
                               :options="oprList" />
                    <span
                        v-if="!disabled"
                        class="icon iconfont iconqingkong remove"
                        @click="_removeAggItem(index)"></span>
                </div>
                <sf-button
                    v-if="!disabled"
                    icon-cls="icon-comp-add"
                    @click="_addAggBy">
                    新增
                </sf-button>
            </div>
        </sf-form-item>
    </div>
</template>
<style lang="less">
    .common-agg-form{
        .agg-list-form{
            display: flex;
            .agg-list{
                flex: 1;
                margin-left: 4px;
                .agg-analysis_item{
                    margin-bottom: 10px;
                    .remove{
                        cursor: pointer;
                        margin-left: 4px;
                        &:hover{
                            color: #204ed9
                        }
                    }
                    &:first-child{
                        .remove{
                            display: none;
                        }
                    }
                }
                .groupby-item{
                    margin-bottom: 10px;
                    .remove{
                        cursor: pointer;
                        margin-left: 4px;
                        &:hover{
                            color: #204ed9
                        }
                    }
                    &:first-child{
                        .remove{
                            display: none;
                        }
                        .sfv-select{
                            width: 310px !important;
                        }
                    }
                }
            }
        }
    }
</style>

<script lang=ts>

import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import {
    OPR_UNIT_LIST
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';

const FIELD_WIDTH = 310;
const FIELD_GROUP_WIDTH = 287;

@Component
export default class CommonAggForm extends Vue {

    // TODO: REMOVE ANY
    @Prop({
        type:Array,
        default:()=>[]
    }) list!: SafeAny[]

    // TODO: REMOVE ANY
    @Prop({
        type:Object,
        default:()=>{}
    }) aggData!: SafeAny

    @Prop({
        type:Boolean,
        default:false
    }) disabled!: boolean

    formData = {
        groupByKeys:[],
        aggregationColumns:[],
        aggregationOps:[]
    }

    get fieldWidth () {
        return FIELD_WIDTH;
    }

    get fieldGroupWidth () {
        return FIELD_GROUP_WIDTH;
    }

    get oprList () {
        return OPR_UNIT_LIST;
    }


    @Watch('aggData')
    formDataChange () {
        this.formData = this.aggData;
    }

    _removeGroupByItem (index: number) {
        this.formData.groupByKeys.splice(index, 1);
    }
    _addGroupBy () {
        // @ts-ignore
        this.formData.groupByKeys.push('');
    }
    _removeAggItem (index: number) {
        this.formData.aggregationColumns.splice(index, 1);
        this.formData.aggregationOps.splice(index, 1);
    }
    _addAggBy () {
        // @ts-ignore
        this.formData.aggregationColumns.push('');
        // @ts-ignore
        this.formData.aggregationOps.push('');
    }
    getJsonValue () {
        return this.formData;
    }

};

</script>
